<template>
  <el-dialog class="dialogCard" :closeOnClickModal="false" :visible.sync="showCard">
    <div class="card" v-if="recruitData">
      <div class="top">
        <div class="t">
          <!-- <label>IT 시스템 구축</label> -->
          <h1>{{recruitData.application_scope}}</h1>
          <!-- <span>전체근속<br/>28년 10개월</span> -->
        </div>
        <div class="b">
          <p>{{recruitData.created_at}} 작성({{recruitData.updated_at}} 수정)</p>
          <!-- <el-button class="esc" @click="handleInvite">지원요청</el-button> -->
          <template v-if="type!='userCenter'">
              <el-popconfirm
                v-if="recruitData.collect"
                title="찜한공고에서 제거하시겠습니까?"
                confirmButtonText='확인'
                cancelButtonText='취소'
                iconColor="red"
                @onConfirm="collect"
              >
                <a slot="reference" href="javascript:;" target="_self" class="btn collect">찜하기</a>
            </el-popconfirm>
            <a v-else href="javascript:;" target="_self" class="btn" @click="collect">찜하기</a>
          </template>
        </div>
      </div>
      <div class="box">
        <div class="user">
          <div class="card">
            <div class="info">
              <div class="avatar edit" v-if="type=='userCenter'">
                <img :src="recruitData.user.uthumb?recruitData.user.uthumb:defaultAvatar" :onerror="errorAvatar" />
              </div>
              <div class="avatar" v-else>
                <img :src="recruitData.user.uthumb?recruitData.user.uthumb:defaultAvatar" :onerror="errorAvatar" />
              </div>
              <div class="name">
                <span v-if="recruitData.experts_type">{{recruitData.experts_type}}</span>
                <b>{{ formatName(recruitData.user.name) }}</b>
              </div>
              <div class="contact">
                <span>{{recruitData.user.email}}</span>
                <span>{{type=='userCenter'?recruitData.user.phone:'010-OOOO-OOOO'}}</span>
              </div>
              <div class="works" v-if="recruitData.jobs&&recruitData.jobs.length">
                <span>희망직무</span>
                <p v-html="getJobs(recruitData.jobs)"></p>
              </div>
              <div class="address" v-if="recruitData.areas&&recruitData.areas.length">
                <span>희망근무지역</span>
                <p v-html="getAdds(recruitData.areas)"></p>
              </div>
            </div>
          </div>
          <div class="oa">
            <dl>
              <dt>OA스킬</dt>
              <dd v-for="(item,index) in oaList" :key="index">
                <label>{{item.name}}</label>
                <div class="bar">
                  <div class="t">
                    <i></i>
                    <i></i>
                    <i></i>
                    <i></i>
                    <i></i>
                    <i></i>
                    <i></i>
                    <i></i>
                    <i></i>
                    <i></i>
                  </div>
                  <div class="c" :style="`width:${item.value}%`"></div>
                </div>
              </dd>
            </dl>
            <div class="years" v-if="recruitData.job_age_year||recruitData.job_age_month">
              <label>전체근속</label>
              <span>
                <template v-if="recruitData.job_age_year">
                  <em>{{recruitData.job_age_year}}</em>년
                </template>
                <template v-if="recruitData.job_age_month">
                  <em>{{recruitData.job_age_month}}</em>개월
                </template>
              </span>
            </div>
          </div>
        </div>
        <div class="con">
          <div class="info" v-html="recruitData.introduce||'소개 없 음'"></div>
          <div class="kws" v-html="recruitData.keywords"></div>
          <template v-if="recruitData.skills&&recruitData.skills.length">
            <div class="tit t1">핵심역량</div>
            <div class="skills">
              <template v-for="(item,index) in recruitData.skills">
                <strong>{{item.skill}}</strong>
                <p v-html="formatTit(item.experience)"></p>
              </template>
            </div>
          </template>
          <template v-if="recruitData.experiences&&recruitData.experiences.length">
            <div class="tit t2">경력</div>
            <div class="exps">
              <ul>
                <li v-for="(item,index) in recruitData.experiences" :key="index">
                  <div class="time" v-html="monDiff(item.start_at,item.end_at)"></div>
                  <div class="list">
                    <strong>{{item.company}}</strong>
                    <p
                      class="t"
                    >[{{item.department}}] {{item.duty}} | {{formatDate(item.start_at)}} - {{formatDate(item.end_at)}}</p>
                    <p v-html="formatTit(item.job_content)"></p>
                  </div>
                </li>
              </ul>
            </div>
          </template>
          <template v-if="recruitData.trains&&recruitData.trains.length">
            <div class="tit t3">교육</div>
            <div class="comList">
              <ul>
                <li v-for="(item,index) in recruitData.trains" :key="index">
                  <label>{{item.training}}</label>
                  <span>{{item.training_organization}} <em v-if="item.training_organization">|</em> {{formatDate(item.start_at)}}~{{formatDate(item.end_at)}}</span>
                </li>
              </ul>
            </div>
          </template>
          <template v-if="recruitData.awards&&recruitData.awards.length">
            <div class="tit t4">수상이력</div>
            <div class="comList awards">
              <ul>
                <li v-for="(item,index) in recruitData.awards" :key="index">
                  <div class="t">
                    <label>{{item.award_name}}</label>
                    <span>{{item.issued_by}} <em v-if="item.issued_by">|</em> {{formatDate(item.get_at,1)}}</span>
                  </div>
                  <p>{{item.award_desc}}</p>
                </li>
              </ul>
            </div>
          </template>
          <template v-if="recruitData.certifieds&&recruitData.certifieds.length">
            <div class="tit t5">자격증</div>
            <div class="comList">
              <ul>
                <li v-for="(item,index) in recruitData.certifieds" :key="index">
                  <label>{{item.certified}}</label>
                  <span>{{item.grade}} <em v-if="item.grade">|</em> {{item.issued_by}} <em v-if="item.issued_by">|</em> {{formatDate(item.get_at,1)}}</span>
                </li>
              </ul>
            </div>
          </template>
          <template v-if="recruitData.educations&&recruitData.educations.length">
            <div class="tit t6">학력</div>
            <div class="comList">
              <ul>
                <li v-for="(item,index) in recruitData.educations" :key="index">
                  <label>{{item.school}}</label>
                  <span>{{item.specialities}} <em v-if="item.specialities">|</em> {{formatDate(item.end_at)}}</span>
                </li>
              </ul>
            </div>
          </template>
          <div class="tit t7">기타사항</div>
          <div class="address">
            <ul>
              <li>
                <label>주소</label>
                <span>{{recruitData.user.city_area + " " + recruitData.user.address}}</span>
              </li>
              <li>
                <label>생년월일</label>
                <span>{{formatBirthday(recruitData.user.birthday)}}</span>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="btns">
        <template v-if="type=='userCenter'">
          <el-button type="primary" @click="downPDF(recruitData.pdf_url)">PDF 내려받기</el-button>
          <el-button type="primary" @click="editCV(recruitData.id)">수정하기</el-button>
        </template>
        <!-- <el-button v-else type="primary">찜하기</el-button> -->
        <el-button class="esc" @click="close">닫기</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import { mapState, mapActions } from "vuex";
import config from '@/api/config'
import { getCVDetail, myCvCollect, myCvInvite } from "@/api";

export default {
  name: "recruitCard",
  components: {},
  props: ["cardParams", "allJobs", "type"],
  data () {
    return {
      oaList: [
        { id: 1, name: "Powerpoint", value: 0 },
        { id: 2, name: "Excel", value: 0 },
        { id: 3, name: "Word", value: 0 },
        { id: 4, name: "아래한글", value: 0 }
      ],
      recruitData: null,
      showCard: false
    };
  },
  computed: {
    ...mapState(["errorAvatar", "defaultAvatar"])
  },
  created () { },
  mounted () { },
  methods: {
    async getInfo () {
      let _params = { cv_id: this.cardParams.id }
      !this.type && (_params.is_show = 1)
      let res = await getCVDetail(_params);
      if (res.code == 200) {
        this.showCard = true;
        this.recruitData = res.data;
        this.recruitData.PPT_grade &&
          (this.oaList[0].value = this.recruitData.PPT_grade * 10);
        this.recruitData.Excel_grade &&
          (this.oaList[1].value = this.recruitData.Excel_grade * 10);
        this.recruitData.Word_grade &&
          (this.oaList[2].value = this.recruitData.Word_grade * 10);
        this.recruitData.HWP_grade &&
          (this.oaList[3].value = this.recruitData.HWP_grade * 10);
        this.$emit("changeLoad");
      } else {
        this.$emit("changeLoad");
      }
    },
    monDiff (st, et) {
      let startTime = new Date(st),
        endTime = new Date(et),
        date2Mon;
      let startDate =
        startTime.getDate() +
        startTime.getHours() / 24 +
        startTime.getMinutes() / 24 / 60;
      let endDate =
        endTime.getDate() +
        endTime.getHours() / 24 +
        endTime.getMinutes() / 24 / 60;
      if (endDate >= startDate) {
        date2Mon = 0;
      } else {
        date2Mon = -1;
      }
      let _m =
        (endTime.getYear() - startTime.getYear()) * 12 +
        endTime.getMonth() -
        startTime.getMonth() +
        date2Mon;
      if (_m < 12) {
        return (_m || 1) + "개월";
      } else {
        let _y = parseInt(_m / 12);
        if (_y == 0) {
          return _y + "년";
        } else {
          return _y + "년<br/>" + (_m - _y * 12) + "개월";
        }
      }
    },
    getJobs (jobs) {
      let _txt = "";
      jobs.length &&
        jobs.forEach((o, i) => {
          o.job1 && (_txt +=
            (i != 0 ? " , " : "") +
            o.job1.name +
            (o.job2 ? ">" + o.job2.name : "") +
            (o.job3 ? ">" + o.job3.name : ""));
        });
      return _txt;
    },
    getAdds (aras) {
      let _txt = "";
      aras.length &&
        aras.forEach((o, i) => {
          o.area1 && (_txt +=
            (i != 0 ? " , " : "") +
            o.area1.name +
            (o.area2 ? ">" + o.area2.name : "") +
            (o.area3 ? ">" + o.area3.name : ""));
        });
      return _txt;
    },
    formatTit (txt) {
      return txt.replace(/\n/g, '<br/>')
    },
    formatDate(date,type) {
      if(date == null){
        return ""
      }else{
        if(type==1){
          return date.slice(0, 4)+'년';
        }else{
          return date.slice(0, 7);
        }
      }  
    },
    async collect () {
      let _status = 1;
      this.recruitData.collect && (_status = 0)
      let res = await myCvCollect({ cv_id: this.recruitData.id, status: _status });
      try {
        if (res.code == 200) {
          this.recruitData.collect = _status;
          this.$emit("changeCollect", _status);
        }
      } catch (error) { }
    },
    close () {
      this.showCard = false;
    },
    editCV (id) {
      this.$emit("editCV", id);
    },
    downPDF (url) {
      window.open(url, '_blank');
    },
    formatName (name) {
      if (this.type == 'userCenter') {
        return name;
      } else {
        return name.substr(0, 1) + '**';
      }
    },
    formatBirthday (date) {
      try {
        let _arry = date.split('-')
        return _arry[0] + '년 ' + _arry[1] + '월 ' + _arry[2] + '일'
      } catch (error) {
        return ""
      }
    },
    handleInvite () {
      myCvInvite({ cv_id: this.recruitData.id }).then((res) => {
          this.$alert(res.message, '알림', {
              confirmButtonText: '확인'
            });
      })
    }

  },
  watch: {
    cardParams (n, o) {
      this.getInfo();
    }
  }
};
</script>
<style lang="scss" scoped>
@import '@/assets/styles/recruit_card.scss';
</style>
